<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*,hotel.entity.*"%>
<%@include file="../link.html"%>
<!DOCTYPE html>
<script type="text/javascript">
var html1="<div id='";
var html2="' class='form-group'><input name='count' value='' type='hidden'> <input type='hidden' name='tele' value=''> <input type='hidden' name='id_number' value=''> <label class='col-sm-4 control-label'>房间";
var html3="</label><div class='col-sm-5'><div class='input-group'><input name='customerName' class='form-control' value='' readonly required><span class='input-group-addon'><a href='#' onclick='itemDescription(this)'>填写住户信息</a></span></div></div></div>"
var availableRoomCount=0;//某一类型房间可用数量
$(document).ready(function() {
	var categoryid=$('#categoryid').val();
	var amount=$('#amount').val();
	var url="getPrice?categoryid="+categoryid+"&amount="+amount;
	if(categoryid!='0'){
		$.get(url,function(data){
			$('#totalPrice').val(data.totalPrice);
			$('#price').val(data.price);
		},"json");
	}
	
	$("#btn-close").click( function () { 
		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		parent.layer.close(index); //再执行关闭 
	});
});

function saveCheckin(){
	var index=$('#btn-submit').attr('class').indexOf("disabled");
	if(index==-1){//disabled的下标为-1说明确定按钮可用
		$.ajax({
	        type:"post",
	        url:"checkin",
	        data: $('#checkinForm').serialize(),//表单数据
	        success: function(data){
				layer.msg('添加成功', {icon: 1, time: 800}, function(){//关闭后执行的操作
						var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
						parent.layer.close(index); //再执行关闭 
				});  
	        }
	    });
	}
	return false;
}

function selectRoom(){
	layer.open({ //layer弹出层
		type : 2,
		title : "选择房间",
		area : [ '800px', '400px' ],
		content : 'selectRoom?categoryid='+$('#categoryid').val()+'&amount='+$('#amount').val(),
		shade : [ 0.6, '#000' ],//阴影透明度
		anim : 2,//弹出动画
		isOutAnim : false,//关闭无动画
	});	
}

function itemDescription(node){//填写住户信息
	var divId=$(node).parent().parent().parent().parent().attr("id");
	layer.open({ //layer弹出层
		type : 2,
		title : "房间"+divId+" 住户信息",
		area : [ '800px', '400px' ],
		content : 'enterItem?divId='+divId,
		shade : [ 0.6, '#000' ],//阴影透明度
		anim : 2,//弹出动画
		isOutAnim : false,//关闭无动画
	});
}

function change2(){//找零,change()为jQuery已有方法
	var totalPrice=$('#totalPrice').val();
	var actualPay=$('#actualPay').val()
	$('#change').val(actualPay-totalPrice);
}
</script>

<div style="padding-top:25px;">
	<form id="checkinForm" action="addCheckin" method="post" class="form-horizontal" 
	data-toggle="validator" role="form">
		
		<input type="hidden" name="reserveid" value="${reserve.reserveid}">
		<input type="hidden" name="operateUser.userid" value="${loginUser.userid}">
		<input id="price" type="hidden" name="price" value="" >
		
		<div class="form-group">
			<label class="col-sm-4 control-label">房间类型</label>
			<div class="col-sm-5">
				<select name="category.categoryid" class="form-control" id="categoryid" onchange="changeCategory()">
					<option value ='${reserve.category.categoryid}'>${reserve.category.categoryName}</option>
				</select>
			</div>
			<div class="help-block with-errors"></div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-4 control-label">房间数量</label>
			<div class="col-sm-5">
				<input id="amount" name="amount" 
				class="form-control" readonly value="${reserve.amount}">	
			</div>
		</div>
		
		<input type="hidden" name="roomids" value="">
		<div class='form-group'>
			<label class='col-sm-4 control-label'>入住房间</label>
			<div class='col-sm-5'>
				<div class="input-group">	
					<input id='roomNumbers' class='form-control' value="" readonly required>
					<span class="input-group-addon">
					<a href="#" onclick="selectRoom()">选择房间</a>
					</span>
				</div>
			</div>
		</div>
		
		<%
		int amount=(int)request.getAttribute("amount");
		for(int i=0;i<amount;i++){
		%>
		<div id='<%=i+1%>' class='form-group'>
			<input type='hidden' name='count' value=''>
			<input type='hidden' name='tele' value=''>
			<input type='hidden' name='id_number' value=''> 
			<label class='col-sm-4 control-label'>房间<%=i+1%></label>
			<div class='col-sm-5'>
				<div class="input-group">	
					<input name='customerName' class='form-control' value="" readonly required>
					<span class="input-group-addon">
					<a href="#" onclick="itemDescription(this)">填写住户信息</a>
					</span>
				</div>
			</div>
		</div>
		<%}%>
		
		<div class="form-group">
			<label class='col-sm-4 control-label'>应付金额</label>
			<div class='col-sm-5'>
				<div class="input-group">
					<span class="input-group-addon">
						<i class="fa fa-cny"></i>
					</span>
					<input id="totalPrice" class='form-control' name="totalPrice" readonly>
				</div>
			</div>
		</div>
		
		<div class="form-group">
			<label class='col-sm-4 control-label'>实际支付</label>
			<div class='col-sm-5'>
				<div class="input-group">
					<span class="input-group-addon">
						<i class="fa fa-cny"></i>
					</span>
					<input id='actualPay' name='actualPay' class='form-control' onkeyup="change2()">
				</div>
			</div>
		</div>
		
		<div class="form-group">
			<label class='col-sm-4 control-label'>找零</label>
			<div class='col-sm-5'>
				<div class="input-group">
					<span class="input-group-addon">
						<i class="fa fa-cny"></i>
					</span>
					<input id="change" class='form-control' value="" disabled>
				</div>
			</div>
		</div>
		
		<div class="box-footer"></div>
		
		<div class="form-group">
			<label class="col-sm-4 control-label"></label>
			<div class="col-sm-5">
				<div class="pull-right">
					<button id="btn-submit" type="submit" class="btn btn-primary" onClick="return saveCheckin()">
						<i class="fa fa-floppy-o "></i> 确定
					</button>
					<button id="btn-close" class="btn btn-close btn-primary" type="button">
						<i class="fa fa-remove"></i> 关闭
					</button>
				</div>
			</div>
		</div>
	</form>
</div>